<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="google-site-verification" content="tm5Y6ZNTf-lBqbwniGjQPv1q02o2TuUQZ9GTYa4SMLg" />
  <title>LaTeX.css — Make your website look like a LaTeX document</title>

  <meta name="description"
    content="A minimal, almost class-less CSS library to write modern websites that look like LaTeX documents." />
  <meta name="keywords" content="latex.css,css library,class-less css,latex css" />
  <meta property="og:title" content="LaTeX.css" />
  <meta property="og:url" content="https://latex.vercel.app" />
  <meta property="og:description"
    content="A minimal, almost class-less CSS library to write modern websites that look like LaTeX documents." />
  <meta property="og:type" content="website" />

  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="prism/prism.css" />
</head>

<body id="top" class="text-justify">
  <header>
    <h1><span class="latex">L<span>a</span>T<span>e</span>X</span>.css</h1>
    <p class="author">
      Vincent Dörig <br />
      May 2020
    </p>
  </header>

  <div class="abstract">
    <h2>Abstract</h2>
    <p>
      This almost class-less CSS library turns your HTML document into a
      website that looks like a
      <span class="latex">L<span>a</span>T<span>e</span>X</span>
      document. Write semantic HTML, add
      <code class="language-html">&lt;link rel="stylesheet"
          href="https://latex.vercel.app/style.css"&gt;</code>
      to the <code class="language-html">&lt;head&gt;</code> of your project and you are good to go.
      The source code can be found on GitHub at
      <a href="https://github.com/vincentdoerig/latex-css">https://github.com/vincentdoerig/latex-css</a>.
    </p>
  </div>

  <nav role="navigation" class="toc">
    <h2>Contents</h2>
    <ol>
      <li><a href="#getting-started">Getting Started</a></li>
      <li>
        <a href="#class-based-elements">Class-based Elements</a>
        <ol>
          <li><a href="#author-abstract">Author and Abstract</a></li>
          <li>
            <a href="#tdpl">Theorems, Definitions and Proofs</a>
            <ol>
              <li><a href="#proofs-theorems">Proofs & Theo&shy;rems</a></li>
              <li><a href="#lemmas">Lemmas</a></li>
              <li><a href="#definitions">Definitions</a></li>
            </ol>
          </li>
          <li><a href="#paragraphs">Paragraphs</a></li>
          <li><a href="#text-justification">Text Justification</a></li>
          <li><a href="#table-classes">Table Classes</a>
            <ol>
              <li><a href="#table-borders">Custom Table Bor&shy;ders</a></li>
              <li><a href="#table-column-aligment">Table Column Align&shy;ment</a></li>
            </ol>
          </li>
          <li><a href="#auto-hyphenation">Automatic Hyphenation</a></li>
        </ol>
      </li>
      <li><a href="#language-support">Language Support</a></li>
      <li><a href="#sidenotes">Sidenotes</a></li>
      <li><a href="#dark-mode">Dark Mode</a></li>
      <li><a href="#alternative-typeface">Alternative Typeface</a></li>
      <li>
        <a href="#html-elements">HTML Elements</a>
        <ol>
          <li><a href="#text-formatting">Text Formatting</a></li>
          <li><a href="#blockquotes">Blockquotes</a></li>
          <li><a href="#definition-lists">Definition Lists</a></li>
          <li><a href="#tables">Tables</a></li>
          <li><a href="#images">Images</a></li>
        </ol>
      </li>
      <li>
        <a href="#miscellaneous">Miscellaneous</a>
        <ol>
          <li><a href="#scroll-overflow">Scroll Overflow</a></li>
          <li><a href="#syntax-highlighting">Syntax Highlighting</a></li>
        </ol>
      </li>
    </ol>
  </nav>

  <main>
    <article>
      <h2 id="getting-started">Getting Started</h2>
      <ul>
        <li>
          Add the line
          <pre><code class="language-html break-all">&lt;link rel="stylesheet" href="https://latex.vercel.app/style.css"&gt;</code></pre>
          to the <code class="language-html">&lt;head&gt;</code> of your website or install the
          package using <code>npm install latex.css</code>.
        </li>
        <li>
          (optional) Add any classes to elements described in the
          <a href="#class-based-elements">next section</a>.
        </li>
        <li>
          (optional) Add dark mode by adding the <code>latex-dark-auto</code> class to the <code
            class="language-html">&lt;body&gt;</code>.
          More infos <a href="#dark-mode">here</a>.
        </li>
        <li>
          (optional) If you need support for
          <span class="latex">L<span>a</span>T<span>e</span>X</span> math, add
          the following script to include
          <a href="https://www.mathjax.org/">MathJax</a>:
          <pre><code class="language-html">&lt;script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>
          (optional) If you need syntax highlighting, add
          the following script to include
          <a href="https://prismjs.com/">Prism</a> and the Prism LaTeX stylesheet (or use any other):
          <pre><code class="language-html">&lt;link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css"&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>Done.</li>
      </ul>

      <h2 id="class-based-elements">Class-based Elements</h2>
      <h3 id="author-abstract">Author and Abstract</h3>
      <p>
        Use the following code to add an author and abstract to your document.
        It will look like <a href="#top">this</a>.
      </p>
      <pre><code class="language-html">&lt;p class="author"&gt;John Doe &lt;br&gt; December 7, 2020&lt;/p&gt;

&lt;div class="abstract"&gt;
  &lt;h2&gt;Abstract&lt;/h2&gt;
  &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>

      <h3 id="tdpl">Theorems, Definitions, Lem&shy;mas and Proofs</h3>
      <p>
        Theorems, definitions, lemmas and proofs are supported. Just wrap your
        content in a div and add the corresponding class to the element like
        in the following example.
      </p>

      <pre><code class="language-html">&lt;div class="theorem"&gt;...&lt;/div&gt;
&lt;div class="definition"&gt;...&lt;/div&gt;
&lt;div class="lemma"&gt;...&lt;/div&gt;
&lt;div class="proof"&gt;...&lt;/div&gt;</code></pre>
      <p>Below are some examples.</p>
      <h4 id="proofs-theorems">Proofs & Theorems</h4>
      <div class="theorem">
        The real numbers $\mathbb{R}$ are uncountable.
      </div>
      <div class="proof">
        If $\mathbb{R}$ is countable, then [0, 1] is countable as well. Hence
        there exists a map C from $\mathbb{N}$ onto [0, 1] with
        $$C(n)=\sum_{i=1}^{\infty} c_{i}(n) 10^{-i}$$ where $c_{i}(n)
        \in\{0,1, \ldots, 9\},$ are the digits in decimal expansion. Now
        consider a real number $$x=\sum_{i=1}^{\infty} \bar{c}_{i} 10^{-i}
        \in[0,1]$$ with $\bar{c}_{i} \neq c_{i}(i)$. Obviously $C(n) \neq x$
        for all $n \in \mathbb{N} .$ Hence $C$ is not onto. A contradiction.
      </div>
      <div class="theorem">
        If $S$ is both countable and infinite, then there is a bijection
        between $S$ and $\boldsymbol{N}$ itself.<sup><a href="#fn1" id="ref1">1</a></sup>
      </div>
      <div class="proof">
        For any $s \in S,$ we let $f(s)$ denote the value of $k$ such that $s$
        is the $k$ the smallest element of $S .$ This map is well defined for
        any $s,$ because there are only finitely many natural numbers between
        1 and $s .$ It is impossible for two different elements of $S$ to both
        be the $k$ the smallest element of $S$. Hence $f$ is one-to-one. Also,
        since $S$ is infinite, $f$ is onto.
      </div>
      <h4 id="lemmas">Lemmas</h4>
      <div class="lemma">
        An even number plus an even number results in an even number.
      </div>
      <h4 id="definitions">Definitions</h4>
      <div class="definition">
        A definition is a a statement of the meaning of a word or word group
        or a sign or symbol.<sup><a href="#fn2" id="ref2">2</a></sup>
      </div>

      <h3 id="paragraphs">Paragraphs</h3>
      <p>
        In order to get automatic first line indentation of paragraphs, like in
        default <span class="latex">L<span>a</span>T<span>e</span>X</span> articles, the class
        <code>indent-pars</code> can be used with <code>article</code> tag.
      </p>
      <pre><code class="language-html">&lt;article class="indent-pars"&gt;
  ...
&lt;/article&gt;</code></pre>
      <p>
        The CSS style provided follows <code>babel</code> specific language rules: by default,
        the first paragraph after a section title is not indented in English, unlike Spanish and
        French languages.
      </p>
      <p>
        To avoid first line indentation of some specific paragraph, the class <code>no-indent</code>
        can be used.</p>
      <pre><code class="language-html">&lt;p class="no-indent"&gt;...&lt;/p&gt;</code></pre>
      <h3 id="text-justification">Text Justification</h3>
      <p>
        By default, text content is aligned to the left. If you want to justify the text like in
        LaTeX documents, you can use the class <code class="language-css">text-justify</code> on
        the <code class="language-html">body</code> element.
      </p>
      <p>
        It is important to consider that elements such as long URLs or long inline code snippets
        can lead to irregular word spacing, which in turn degrades readability. It's the
        author's responsibility to format problematic elements like switching to a code block,
        moving the URLs to a separate line, inserting word break opportunities or modifying the
        way the line breaks are inserted.
      </p>
      <p>
        To address the latter of these methods, the class <code class="language-css">break-all</code>
        can be used. When applied to an element, the browser is allowed to insert line breaks at any point
        between two characters. Keep in mind that this does not preserve whole words, so it is
        recommended to use it only when necessary.
      </p>
      <h3 id="table-classes">Table Classes</h3>
      <h4 id="table-borders">Custom Table Borders</h4>
      <p>
        To add custom borders to the table, you should use the class
        <code class="language-html">borders-custom</code> with <code>&lt;table&gt;</code>
        tag, to begin with a table without any border. The classes
        <code>border-&lt;position&gt;-thin</code> and <code>border-&lt;position&gt;-thick</code>,
        are available, where <code>&lt;position&gt;</code> can take one of the values:
        <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>.
      </p>
      <pre><code class="language-html">&lt;table class="borders-custom ..."&gt;
  &lt;tr class="border-bottom-thick"&gt;
    &lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="border-bottom-thin"&gt;
    &lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  ...</code></pre>
      <p>See full examples in the <a href="#tables">section about tables</a>.</p>
      <h4 id="table-column-aligment">Table Column Alignment</h4>
      <p>
        For each column of the table, there is one class for left, center or right
        alignment, up to 12 columns: <code>col-&lt;n&gt;-l</code>, <code>col-&lt;n&gt;-c</code>,
        <code>col-&lt;n&gt;-r</code>, <code>n</code>=1, ...,12. For example, a table with 3 columns
        using the following classes
      </p>
      <pre><code class="language-html">&lt;table class="col-1-l col-2-c col-3-r"&gt;
  &lt;tr&gt;
    &lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;&lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  ...</code></pre>
      <p>
        aligns the first column to the left, centers the second one and aligns the
        third to the right.
      </p>

      <p>See full examples in the <a href="#tables">section about tables</a>.</p>

      <h4 id="auto-hyphenation">Automatic Hyphenation</h4>
        <p>
          By default, hyphenation is allowed for all words in the document when text wraps
          across multiple lines, except for code snippets. If you want to avoid this
          behaviour for a specific word (for example, for a hyphenated compound word),
          you can use the <code class="language-css">whitespace-nowrap</code> utility class to
          prevent line breaks inside an element.
        </p>

      <h2 id="language-support">Language Support</h2>
      <p>
        The labels of theorems, definitions, lemmas and proofs can be changed
        to other
        <a href="https://github.com/vincentdoerig/latex-css/tree/master/lang">supported language</a>
        by including the following snippet, linking to the desired language in
        addition to the main CSS file.
      </p>
      <pre><code class="language-html">&lt;link rel="stylesheet" href="https://latex.vercel.app/lang/es.css" /&gt;
  ...
&lt;html lang="es"&gt;</code></pre>
      <p>
        Take a peek at the <a href="/languages">language support demo</a> to
        see how the labels of the different languages change.
      </p>

      <h2 id="sidenotes">Sidenotes</h2>
      <p>
        Sidenotes can be used as an alternative to footnotes, where the user does not
        have to jump to the bottom of the page to read it. On mobile, click the
        superscript to reveal the note<label for="sn-1" class="sidenote-toggle sidenote-number"></label><input
          type="checkbox" id="sn-1" class="sidenote-toggle" /><span class="sidenote">Yay, sidenotes!. If you are on
          mobile, I will appear inline. If you are
          using a larger screen, the sidenote will appear to the right of the
          text.</span>.
      </p>

      <p>
        Sidenotes do need a little bit of setup, they are made up of a label, an
        invisible checkbox on top of the number and a span with the text inside. The
        superscript is set automatically and incremented using CSS when the
        checkbox has a class of <code>sidenote-number</code>.
      </p>
      <pre><code class="language-html">&lt;label for="sn-1" class="sidenote-toggle sidenote-number"&gt;&lt;/label&gt;
&lt;input type="checkbox" id="sn-1" class="sidenote-toggle" /&gt;
&lt;span class="sidenote"&gt;&lt;!-- sidenote content --&gt;&lt;/span&gt;</code></pre>
      <p>If you do not need superscripted numbers, you can opt out of the <code>sidenote-number</code> class and the sidenote will not have a number assigned. On a smaller screen, you will need to add a symbol inside the <code>label</code> for the user to click on. <label for="sn-plus" class="sidenote-toggle">⊕</label><input type="checkbox"
          id="sn-plus" class="sidenote-toggle" /><span class="sidenote">This is a sidenote without a number.</span></p>
      <p>The snippet for a sidenote without a number is very similar:</p>
      <pre><code class="language-html">&lt;label for="sn-anything" class="sidenote-toggle"&gt;⊕&lt;/label&gt;
&lt;input type="checkbox" id="sn-anything" class="sidenote-toggle" /&gt;
&lt;span class="sidenote"&gt;&lt;!-- sidenote content --&gt;&lt;/span&gt;</code></pre>
      <!-- sidnotes as a link
          <label for="sn-plus" class="sidenote-toggle"><a
            href="#sn-plus-content">⊕</a></label><input type="checkbox" id="sn-plus" class="sidenote-toggle" /><span
          class="sidenote" id="sn-plus-content">This is a sidenote without a number.</span> -->
      <p>Add a class of <code>left</code> to the span with the <code>sidenote</code> class to make the note appear on the left side of the page instead of the right.</p>
      <p>The symbol you could use to indicate a sidenote is up to you. What about this notebook. <label for="sn-symbol"
          class="sidenote-toggle">📝</label><input type="checkbox" id="sn-symbol" class="sidenote-toggle" /><span
          class="sidenote left">A notebook indicating a note. Aha. <br> (if on a large screen, resize to mobile to see the emoji)</span></p>
      <!-- <blockquote>You could also have sidenotes inside blockquotes just like this one <label for="sn-quote"
          class="sidenote-toggle">🔖</label><input type="checkbox" id="sn-quote" class="sidenote-toggle" /><span
          class="sidenote">Hello there!</span>.</blockquote> -->

      <h2 id="dark-mode">Dark Mode</h2>
      <p>There is built-in support for dark mode. By default, the document is in light mode. To enable dark mode, add
        the
        <code>latex-dark</code> class to the <code class="language-html">&lt;body&gt;</code> element. This will force
        the document to be in dark mode.
      </p>
      <p>If you want enable dark mode based on the
        <code>prefers-color-scheme</code> CSS media query, then use the <code>latex-dark-auto</code> class instead.
      </p>
      <p>You can also add a dark mode toggle to your site by adding a button and a tiny bit of JavaScript:</p>
      <pre><code class="language-html">&lt;button id="dark-mode-toggle"&gt;Toggle dark mode&lt;/button&gt;</code></pre>
      <pre><code class="language-javascript">document
  .querySelector("#dark-mode-toggle")
  .addEventListener('click', () => {
     document.body.classList.toggle("latex-dark");
  });</code></pre>
      <p>Like this: <button id="dark-mode-toggle">Toggle dark mode</button></p>

      <h2 id="alternative-typeface">Alternative Typeface</h2>
      <p><span class="latex">L<span>a</span>T<span>e</span>X</span>.css uses Latin Modern by default. If you don't like this typeface (hard to read, too thin, etc.), you can switch to the <a href="https://github.com/alerque/libertinus"><code>Libertinus</code></a> font family by adding a class of <code>libertinus</code> to the <code class="language-html">&lt;body&gt;</code> tag. Click the button below to switch between Latin Modern and Libertinus.</p>

      <button id="typeface-toggle">Current typeface: <span id="typeface">Latin Modern</span></button>

      <h2 id="html-elements">HTML Elements</h2>
      <p>
        For a preview of all HTML elements with LaTeX.css, check out the
        <a href="/elements">HTML5 elements test page</a>.
      </p>

      <h3 id="text-formatting">Text Formatting</h3>
      <p>
        This sentence is <b>bold</b>. If you like semantics, you might go with
        <strong>strong</strong> or <em>emphasized</em> text. If not,
        <i>italic</i> is still around. <small>Small</small> text is for fine
        print. Your copy can also be <sub>subscripted</sub> and
        <sup>superscripted</sup>, <ins>inserted</ins>, <del>deleted</del>, or
        <mark>highlighted</mark>. You would use a
        <a href="#!">hyperlink</a> to go to a new page. Keyboard input
        elements like <kbd>Cmd</kbd> + <kbd>Shift</kbd>
        are used to display textual user input.
      </p>

      <h3 id="blockquotes">Blockquotes</h3>
      <blockquote>
        Give me six hours to chop down a tree and I will spend the first four
        sharpening the axe.
        <cite>— Abraham Lincoln</cite>
      </blockquote>

      <h3 id="definition-lists">Definition Lists</h3>
      <dl>
        <dt>Definition Title One</dt>
        <dd>First definition description</dd>
        <dt>Binomial theorem</dt>
        <dd>
          $$(x+y)^{n}=\sum_{k=0}^{n}\left(\begin{array}{l}n \\
          k\end{array}\right) x^{n-k}
          y^{k}=\sum_{k=0}^{n}\left(\begin{array}{l}n \\ k\end{array}\right)
          x^{k} y^{n-k}$$
        </dd>
      </dl>

      <h3 id="tables">Tables</h3>
      <table>
        <caption>A sample table with a descriptive caption.</caption>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Footer 1</th>
            <th>Footer 2</th>
            <th>Footer 3</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Description 1</td>
            <td>Description 2</td>
            <td>Description 3</td>
          </tr>
          <tr>
            <td>Description 1</td>
            <td>Description 2</td>
            <td>Description 3</td>
          </tr>
          <tr>
            <td>Description 1</td>
            <td>Description 2</td>
            <td>Description 3</td>
          </tr>
        </tbody>
      </table>

      <table>
        <caption>
          Example table taken from <a href="https://texdoc.org/serve/booktabs/0">this
            paper</a> on how to produce quality tables with LaTeX.
        </caption>
        <thead>
          <tr>
            <th colspan="2" scope="col">Item</th>
          </tr>
          <tr>
            <th>Animal</th>
            <th>Description</th>
            <th>Price ($)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Gnat</td>
            <td>per gram</td>
            <td>13.65</td>
          </tr>
          <tr>
            <td>Gnu</td>
            <td>stuffed</td>
            <td>92.50</td>
          </tr>
          <tr>
            <td>Emu</td>
            <td>stuffed</td>
            <td>33.33</td>
          </tr>
          <tr>
            <td>Armadillo</td>
            <td>frozen</td>
            <td>8.99</td>
          </tr>
        </tbody>
      </table>

      <div class="scroll-wrapper">
        <table>
          <caption>Color names and values.</caption>
          <tbody>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">HEX</th>
              <th scope="col">HSL</th>
              <th scope="col">RGB</th>
            </tr>
            <tr>
              <th scope="row" style="color: teal;">Teal</th>
              <td><code>#008080</code></td>
              <td><code>hsl(180, 100%, 25%)</code></td>
              <td><code>rgb(0, 128, 128)</code></td>
            </tr>
            <tr>
              <th scope="row" style="color: goldenrod;">Goldenrod</th>
              <td><code>#daa520</code></td>
              <td><code>hsl(43, 74%, 49%)</code></td>
              <td><code>rgb(218, 165, 32)</code></td>
            </tr>
            <tr>
              <th scope="row" style="color: cornflowerblue;">Cornflowerblue</th>
              <td><code>#6495ed</code></td>
              <td><code>hsl(219, 79%, 66%)</code></td>
              <td><code>rgb(100, 149, 237)</code></td>
            </tr>
            <tr>
              <th scope="row" style="color: lightcoral;">Lightcoral</th>
              <td><code>#f08080</code></td>
              <td><code>hsl(0, 79%, 72%)</code></td>
              <td><code>rgb(240, 128, 128)</code></td>
            </tr>
          </tbody>
        </table>
      </div>

      <table class="borders-custom col-1-c col-2-c col-3-c col-4-c col-5-c col-6-c
        col-7-c col-8-c">
        <caption>Example table with custom borders and aligment.</caption>
        <colgroup>
          <col class="border-left-thin border-right-thin">
          <col class="border-right-thin">
          <col class="border-right-thin">
          <col class="border-right-thin">
          <col class="border-right-thick">
          <col class="border-right-thin">
          <col class="border-right-thin">
        </colgroup>
        <tr class="border-top-thin">
          <th scope="col" colspan="7">De Morgan's Law: $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$</th>
        </tr>
        <tr>
          <th scope="col" colspan="7" class="border-bottom-thin">TRUTH TABLE</th>
        </tr>
        <tr class="border-bottom-thin">
          <td>$P$</td>
          <td>$Q$</td>
          <td>$\lnot P$</td>
          <td>$\lnot Q$</td>
          <td>$P \land Q$</td>
          <td>$\lnot P \lor \lnot Q$</td>
          <td>$\lnot (P \land Q)$</td>
        </tr>
        <tr class="border-bottom-thin">
          <td rowspan="2">T</td>
          <td>T</td>
          <td rowspan="2">F</td>
          <td>F</td>
          <td>T</td>
          <td><strong>F</strong></td>
          <td><strong>F</strong></td>
        </tr>
        <tr class="border-bottom-thin">
          <td>F</td>
          <td>T</td>
          <td>F</td>
          <td><strong>T</strong></td>
          <td><strong>T</strong></td>
        </tr>
        <tr class="border-bottom-thin">
          <td rowspan="2">F</td>
          <td>T</td>
          <td rowspan="2">T</td>
          <td>F</td>
          <td>F</td>
          <td><strong>T</strong></td>
          <td><strong>T</strong></td>
        </tr>
        <tr class="border-bottom-thin">
          <td>F</td>
          <td>T</td>
          <td>F</td>
          <td><strong>T</strong></td>
          <td><strong>T</strong></td>
        </tr>
      </table>

      <table class="borders-custom col-1-l col-2-c col-3-c col-4-r">
        <caption>Close approaches to the Earth by NEOs.</caption>
        <thead>
          <tr class="border-bottom-thick">
            <th>CA Date</th>
            <th>Object Name</th>
            <th>Diameter</th>
            <th>Dist. Min. (LD)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2023-Jul-10</td>
            <td>2018 NW</td>
            <td>7.3m-16m</td>
            <td>0.287</td>
          </tr>
          <tr>
            <td>2023-Jul-10</td>
            <td>2023 LN1</td>
            <td>45m-00m</td>
            <td>17.813</td>
          </tr>
          <tr>
            <td>2023-Jul-11</td>
            <td>2023 MD2</td>
            <td>36m-80m</td>
            <td>5.570</td>
          </tr>
          <tr>
            <td>2023-Jul-11</td>
            <td>2023 NE</td>
            <td>32m-70m</td>
            <td>11.253</td>
          </tr>
          <tr>
            <td>2023-Jul-11</td>
            <td>2023 MQ1</td>
            <td>28m-62m</td>
            <td>10.716</td>
          </tr>
          <tr>
            <td>2023-Jul-12</td>
            <td>2023 OM</td>
            <td>20m-46m</td>
            <td>7.628</td>
          </tr>
          <tr>
            <td>2023-Jul-12</td>
            <td>2018 UY</td>
            <td>190m-420m</td>
            <td>7.412</td>
          </tr>
        </tbody>
      </table>

      <h3 id="images">Images</h3>
      <figure>
        <img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=1000&q=80"
          loading="lazy" alt="Mountain landscape" width="600" height="400" />
        <figcaption>
          Mountain landscape by
          <a href="https://unsplash.com/@heytowner">John Towner</a>.
        </figcaption>
      </figure>

      <h2 id="miscellaneous">Miscellaneous</h2>

      <h3 id="scroll-overflow">Scroll Overflow</h3>
      <p>It is best to break up long equations into smaller parts, but when this isn't possible, consider wrapping the
        overflowing element with a class of <code>scroll-wrapper</code> to
        allow scrolling on the x-axis. Large tables should also be wrapped with this class.</p>
      <p>Below is an example of a long equation with overflow scroll.</p>
      <div class="scroll-wrapper">
        $$(1+x)^{n}=1+n x+\frac{n(n-1)}{2 !} x^{2}+\frac{n(n-1)(n-2)}{3 !} x^{3}+\frac{n(n-1)(n-2)(n-3)}{4 !}
        x^{4}+\frac{n(n-1)(n-2)(n-3)(n-4)}{5 !}
        x^{5}+\ldots$$
      </div>

      <h3 id="syntax-highlighting">Syntax Highlighting</h3>
      <p>If you need syntax highlighting for code, LaTeX.css provides a <a href="https://prismjs.com/">PrismJS</a> theme
        that immitates the <a href="https://github.com/gpoore/minted">minted</a> package for LaTeX. Add the following
        stylesheet and script:</p>
      <pre><code class="language-html">&lt;link rel="stylesheet" href="https://latex.vercel.app/prism/prism.css"&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"&gt;&lt;/script&gt;</code></pre>
      <p>And use it like this:</p>
      <pre><code class="language-html">&lt;pre&gt;
  &lt;code class="language-html"&gt;
    &lt;!-- your HTML code snippet --&gt;
  &lt;/code&gt;
&lt;/pre&gt;</code></pre>
      <p>Change which languages Prism highlights by customising the script <a href="https://prismjs.com/download.html">here</a>.</p>

      <div class="footnotes">
        <p id="fn1">
          1. From
          <a class="break-all"
            href="https://www.math.brown.edu/~res/MFS/handout8.pdf">https://www.math.brown.edu/~res/MFS/handout8.pdf</a>.
          <a href="#ref1" title="Jump back to footnote 1 in the text.">↩</a>
        </p>
        <p id="fn2">
          2. “Definition.” Merriam-Webster.com Dictionary, Merriam-Webster,
          <a class="break-all"
            href="https://www.merriam-webster.com/dictionary/definition">https://www.merriam-webster.com/dictionary/definition</a>.
          Accessed 18 May. 2020.
          <a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a>
        </p>
      </div>
    </article>
  </main>

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'],],
      },
    }
    const typeFaceToggle = document.getElementById('typeface-toggle')
    const typeface = document.getElementById('typeface')
    typeFaceToggle.addEventListener('click', () => {
      document.body.classList.toggle('libertinus')
      typeface.textContent = document.body.classList.contains('libertinus') ? 'Libertinus' : 'Latin Modern'
    })

    const darkModeToggle = document.getElementById('dark-mode-toggle')
    darkModeToggle.addEventListener('click', () => {
      document.body.classList.toggle('latex-dark')
    })
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script async src="prism/prism.js"></script>

</body>

</html>
